<template>
  <div class="control-section">
    <div class="control-section">
      <ejs-accumulationchart ref='pie'
                             :theme='theme'
                             style='display:block'
                             align='center'
                             id='chartcontainer'
                             :title='title'
                             :legendSettings='legendSettings'
                             :tooltip='tooltip'
                             enableSmartLables='true'
                             :enableAnimation='enableAnimation'
                             :center='center'>
        <e-accumulation-series-collection>
          <e-accumulation-series :dataSource='seriesData'
                                 :startAngle='startAngle'
                                 :endAngle='endAngle'
                                 :explodeOffset='explodeOffset'
                                 :explodeIndex='explodeIndex'
                                 :radius='radius'
                                 xName='x'
                                 yName='y'
                                 :dataLabel='dataLabel'
                                 name='Browser'
                                 innerRadius='0%'
                                 explode='true'> </e-accumulation-series>
        </e-accumulation-series-collection>
      </ejs-accumulationchart>
    </div>
  </div>
</template>
<style scoped>
.control-section {
  min-height: 450px;
}
</style>
<script>
import Vue from 'vue'
import mixinGadgetViewModule from '@/mixins/gadget-view-module'

let selectedTheme = location.hash.split('/')[1]
selectedTheme = selectedTheme || 'Material'
let theme = (selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1)).replace(/-dark/i, 'Dark')

export default Vue.extend({
  mixins: [mixinGadgetViewModule],
  data: function () {
    return {
      theme: theme,
      seriesData: [
        { 'x': 'Attached Agreement Prompter', 'y': 24, 'text': 'Attached Agreement Prompter(24)' },
        { 'x': 'Password in Time Entry Alert', 'y': 14, 'text': 'Password in Time Entry Alert(14)' },
        { 'x': 'Ticket Long "In Progress" Verifier - AutoTask', 'y': 7, 'text': 'Ticket Long "In Progress" Verifier - AutoTask(7)' },
        { 'x': '"In Progress" Ticket Verifier', 'y': 4, 'text': '"In Progress" Ticket Verifier(4)' },
        { 'x': 'Insufficient Time Entry Prompter', 'y': 3, 'text': 'Insufficient Time Entry Prompter(3)' },
        { 'x': 'Onsite Schedule Prompter', 'y': 2, 'text': 'Onsite Schedule Prompter(2)' },
        { 'x': 'Late Remote Time Entry Alert', 'y': 1, 'text': 'Late Remote Time Entry Alert(1)' }
      ],
      legendSettings: { visible: true },
      dataLabel: { visible: true, position: 'Inside', name: 'x' },
      tooltip: {
        enable: true,
        // eslint-disable-next-line no-template-curly-in-string
        header: '<b>${point.x}</b>',
        // eslint-disable-next-line no-template-curly-in-string
        format: 'Composition: <b>${point.y}</b>'
      },
      enableAnimation: true,
      enableSmartLabels: true,
      startAngle: '0',
      endAngle: '360',
      radius: '70%',
      explodeOffset: '10%',
      explodeIndex: 0,
      center: { x: '50%', y: '50%' },
      title: 'Mobile Browser Statistics'
    }
  },

  methods: {
    containerResizedEvent (i, newH, newW, newHPx, newWPx) {
      this.chartWidth = (newWPx - 5) + 'px'
      this.chartHeight = (newHPx - 5) + 'px'
    }
  }
})
</script>
